<template>
  <div style="width: 100%">
    <el-upload v-if="!disabled" :action="baseGeneralPath+'/fast/uploadFile'" :show-file-list="false" :before-upload="beforeUpload" :on-success="uploadSuccess" :limit="limit">
      <el-button size="small" type="primary" icon="Upload">点击上传</el-button>
    </el-upload>
    <div class="file-list">
      <div class="file-row" v-for="file in fileListModel">
        <div class="left">
          <img :src="`${file.resourceAddress}`" class="file-row-img" v-if="['jpg','jpeg','png','gif'].includes(file.enclosureSuffix)"/>
          <a class="link" :href="file.resourceAddress"  target="_blank">{{ file.enclosureContent }}</a>
        </div>
        <el-icon v-if="!disabled" class="right" size="16" @click="handleDelete(file)">
          <Delete/>
        </el-icon>
      </div>
    </div>
  </div>
</template>
<script>
import {baseUrlConfig} from '@/config/config'

export default {
  name: "HyUpload",
  props: {
    fileList: {
      type: Array,
    },
    disabled: {
      type: Boolean,
    },
    limit: {
      type: Number,
      default: 10
    }
  },
  computed: {
    fileListModel: {
      get() {
        return this.fileList
      },
      set(val) {
        this.$emit('update:fileList', val)
      }
    }
  },
  data() {
    return {
      baseGeneralPath:baseUrlConfig.businessBaseUrl
    }
  },
  methods: {
    beforeUpload(file) {
      //1MB=1024*1024(1MB=1024KB 1KB=1024MB)
      const is10M = file.size / 1024 / 1024 < 10;

      //限制文件上传大小
      if (!is10M) {
        this.$message.error("上传大小不能超过 10MB!");
        return false
      }
      return true
    },
    uploadSuccess(response) {
      let file = {
        enclosureCode: response.data.enclosureCode, // 文件编码
        enclosureContent: response.data.enclosureContent || (response.data.enclosureName + '.' + response.data.enclosureSuffix), // 文件名
        enclosureName: response.data.enclosureName, //文件前缀
        enclosureSuffix: response.data.enclosureSuffix, // 文件后缀
        resourceAddress: response.data.resourceAddress,
      }
      if (this.fileListModel) {
        this.fileListModel.push(file)
      } else {
        this.fileListModel = [file]
      }
      this.$emit('validateField')
    },
    handleDelete(file) {
      let index = this.fileListModel.findIndex(item => item === file)
      this.fileListModel.splice(index, 1)
    },
  }
}
</script>

<style lang="less" scoped>
.file-list {
  .file-row {
    box-sizing: border-box;
    padding: 10px 20px;
    background: #F3F4F7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px;
    width: 100%;
    max-width: 400px;
    margin-top: 10px;
    .left {
      display: flex;
      align-items: center;
      .file-row-img {
        width: 50px;
        height: 50px;
        border-radius: 5px;
        margin-right: 10px;
      }
    }
    .right {
      cursor: pointer;
    }
    &:hover {
      background: #DADDE4;
    }
  }
  .link {
    color: #409eff;
    cursor: pointer;
    text-decoration: underline;
  }
}
</style>
